<script setup>
import {onMounted, ref} from 'vue'
import {
  NButton,
  NForm,
  NFormItem,
  NInput,
  NTabPane,
  NTabs,
  NImage,
  NUpload,
  useMessage,
  NLayout,
  NLayoutContent
} from 'naive-ui'
import { useI18n } from 'vue-i18n'
import CommonPage from '@/components/page/CommonPage.vue'
import { useUserStore } from '@/store'
import api from '@/api'
import {getToken, is, renderIcon} from '~/src/utils'
const { t } = useI18n()
const userStore = useUserStore()
const isLoading = ref(false)
const base_path = import.meta.env.VITE_BASE
const message = useMessage()

const data = reactive({
  uploadAction: base_path+'/system/base/userimg',
  token: getToken(),
});
const infoForm = ref({})
const infoFormRef = ref(null)

onMounted(() => {
 api.getSettings().then((res) => (infoForm.value = res.data))
})

async function updateSettings() {
  isLoading.value = true
  infoFormRef.value?.validate(async (err) => {
    if (err) return
    await api
      .updateSettings({ ...infoForm.value })
      .then(() => {
        isLoading.value = false
        $message.success("配置更新完成")
      })
      .catch(() => {
        isLoading.value = false
      })
  })
}
</script>

<template>
 <NLayout has-sider wh-full>
    <NLayoutContent style="background: transparent;margin-left: 20px;">
      <CommonPage show-footer title="仓库设置">

        <n-card title="配置" size="small" :segmented="{
            content: true,
            footer: 'soft',
          }">
      <template #header-extra>
         <n-alert title="正常情况下请勿修改" type="warning" :bordered="false"></n-alert>
      </template>
     <NForm
            ref="infoFormRef"
            label-placement="left"
            label-align="left"
            label-width="120"
            :model="infoForm"
            size="large"
          >
            <NFormItem class="form_item" label="仓库设置" path="depository">
              <NInput v-model:value="infoForm.depository" type="textarea" placeholder="仓库设置"  :autosize="{minRows: 2}"/>
              <template #feedback>
                <NFlex style="gap: 0">
                  <component :is="renderIcon('mdi-alert-circle-outline', { size: 18,color:'#aaa' })" />
                  <div style="color:#aaa">系统支持配置多仓库管理，一行一个仓库</div>
                </NFlex>
              </template>
            </NFormItem>


            <NFormItem class="form_item" label="药品分类" path="drugs_category">
              <NInput v-model:value="infoForm.drugs_category" type="textarea" placeholder="药品分类"  :autosize="{minRows: 2}"/>
              <template #feedback>
                <NFlex style="gap: 0">
                  <component :is="renderIcon('mdi-alert-circle-outline', { size: 18,color:'#aaa' })" />
                  <div style="color:#aaa">药品分类，注意是键值对</div>
                </NFlex>
              </template>
            </NFormItem>

            <NFormItem class="form_item" label="供应商" path="gongying">
              <NInput v-model:value="infoForm.gongying" type="textarea" placeholder="供应商" :autosize="{minRows: 2}"/>
              <template #feedback>
                <NFlex style="gap: 0">
                  <component :is="renderIcon('mdi-alert-circle-outline', { size: 18,color:'#aaa' })" />
                  <div style="color:#aaa">供应商，一行一个</div>
                </NFlex>
              </template>
            </NFormItem>

            <NFormItem class="form_item" label="生产厂家" path="manufacturers">
              <NInput v-model:value="infoForm.manufacturers" type="textarea" placeholder="生产厂家" :autosize="{minRows: 2}"/>
              <template #feedback>
                <NFlex style="gap: 0">
                  <component :is="renderIcon('mdi-alert-circle-outline', { size: 18,color:'#aaa' })" />
                  <div style="color:#aaa">生产厂家，一行一个</div>
                </NFlex>
              </template>
            </NFormItem>
          </NForm>
          <template #footer>
             <NButton type="primary" size="large" :loading="isLoading" @click="updateSettings">
              保存配置
            </NButton>
           </template>

  </n-card>



  </CommonPage>
          </NLayoutContent>
  </NLayout>
</template>
<style scoped>
  .form_item{
    margin-bottom: 20px;
  }
</style>